<template>
    <div>
        <van-sticky offset-top="86px">
            <van-dropdown-menu>
                <van-dropdown-item v-model="value1" @closed="change(value1, value2)" :options="option1"/>
                <van-dropdown-item v-model="value2" @closed="change(value1, value2)" :options="option2"/>
            </van-dropdown-menu>
        </van-sticky>

        <router-view :key="$route.path + $route.query.t"></router-view>
    </div>

</template>

<script>
export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: "facistate",
    data() {
        return {
            value1: '0',
            value2: 'a',
            option1: [
                {text: '全部', value: '0'},
                {text: '产线1', value: '1'},
                {text: '产线2', value: '2'},
            ],
            option2: [
                {text: '正常', value: 'a'},
                {text: '异常', value: 'b'},
                {text: '维修中', value: 'c'},
            ],
        }
    },

    methods: {
        change(value1, value2) {
            this.$router.push({
                path: '/facility/facistate/cards',
                query: {
                    value1,
                    value2,
                    t: Date.now()
                }
            })
        }

    },

    mounted() {
        this.change('0', 'a')
        // eslint-disable-next-line no-constant-condition
    },
}
</script>

<style scoped>
.txt /deep/ .a-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    color: aquamarine;
}
</style>

<style>
.txt /deep/ .a-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    color: aquamarine;
}
</style>
